<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绝对定位(absolute positioning)</title>
  <!-- 
    position: absolute;  是 CSS 中的定位属性，用于将元素相对于其最近的已定位（非 static）祖先元素进行定位。绝对定位的总结： 
 
      - position: absolute; ：将元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于最近的包含块（通常是  <body>  元素）进行定位。 
      - 绝对定位的元素会脱离文档流，不再占据原本的空间，可以自由定位在页面中的任意位置。 
      - 可以使用  top ,  right ,  bottom ,  left  属性来指定元素的位置，相对于定位参考点的距离。 
      - 绝对定位通常用于创建悬浮菜单、弹出框等需要脱离文档流并精确定位的元素。 
    
    通过使用  position: absolute;  属性，可以实现元素相对于指定的祖先元素进行精确定位.
  -->
  <style>
    .position-absolute {
      position: relative;
      width: 500px;
      height: 450px;
      border: 1px solid #000;
    }

    .container {
      width: 300px;
      height: 200px;
      border: 1px solid #000;
    }
    
    /* 脱离标准版 - 如果没有已定位的祖先元素，则相对于最近的包含块（通常是  <body>  元素）进行定位 */
    .position-absolute strong {
      position: absolute;
      top: 10px;
      left: 110px;
      color: seagreen;
      background-color: #fff;
    }

    /* 特性: 父元素有定位 - 子元素的定位内容默认宽度不超过父元素的宽度 */
    .position-absolute-container {
      position: absolute;
      bottom: 10px;
      left: 10px;
      width: 300px;
      height: 200px;
      border: 1px solid #000;
    }

    /* 特点1 */
    .position-absolute-characteristic-v1 {
      position: relative;
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      background-color: skyblue;
    }

    .position-absolute-characteristic-v1 .absolute-container {
      position: absolute;
      background-color: sandybrown;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: 0 auto;
    }

    /* 特点2 */
    .position-absolute-characteristic-v2 {
      background-color: aqua;
    }

    .position-absolute-characteristic-v2 > span {
      position: absolute;
      width: 180px;
      height: 180px;
      background-color: seagreen;
    }
  </style>
</head>
<body>

  <h2>绝对定位(absolute positioning)</h2>
  <div class="position-absolute">
    <div class="container">
      <span>my name span element</span>
      <strong>positong-sbsolute-strong-element</strong>
      <div>my name div element</div>
    </div>
    <div class="position-absolute-container">
      <span>my name span element</span>
      <!-- 有上面绝对定位继承特性 -->
      <strong>positong-sbsolute-strong-element</strong>
      <div>my name div element</div>
    </div>
  </div>
  <h3>---------------------------------</h3>
  <h2>绝对定位特点v1(absolute positioning characteristic v1)</h2>
  <div class="position-absolute-characteristic-v1">
    <div class="absolute-container"></div>
  </div>
  <h2>绝对定位特点v2(absolute positioning characteristic v2)</h2>
  <div class="position-absolute-characteristic-v2">
    <span>
      <i>positong-sbsolute-span-element</i>
      <strong>positong-sbsolute-strong-element</strong>
    </span>
  </div>
  
</body>
</html>